import React, { useEffect, useContext, useCallback } from 'react';
import { Form } from 'antd';

import { useForm } from 'antd/lib/form/Form';
import { InspectorContext } from '../FlowManage';
import './SkipComponent.scss';
import { CustomFormItemsHoc } from './CustomFormHoc';

/**
 * 跳转组件
 * 示例： AI管理-机器人管理-版本管理-配置话术流程-跳转组件
 */
const SkipComponent: React.FC = () => {
  const [form] = useForm();
  const { selectedData, onInputChange, isView } = useContext(InspectorContext);
  const { Input, TextArea, InputNumber } = CustomFormItemsHoc({
    disabled: isView,
  });
  const initForm = useCallback(() => {
    console.log('✅form数据-跳转组件-selectedData', selectedData);
    form.setFieldsValue(selectedData);
  }, [form, selectedData]);
  useEffect(() => {
    // 需要手动设置form数据, initialValue初始化属性在切换同组件的props数据时不会更新
    initForm();
    setTimeout(() => {
      // 表单验证
      form.validateFields();
    }, 0);
  }, [form, initForm]);

  return (
    <Form className="skip-component" layout="vertical" form={form}>
      <Form.Item
        label="跳转组件名称"
        name="title"
        rules={[
          {
            required: true,
            whitespace: true,
            max: 30,
            message: '仅支持输入30个以内字符',
          },
        ]}
        getValueFromEvent={event => {
          return event.target.value.replace(/\s+/g, '');
        }}
      >
        <Input
          maxLength={30}
          // onChange={e => {
          //   onInputChange("title", e.target.value, e.type === "blur");
          // }}
          onBlur={(e: { target: { value: any }; type: string }) => {
            onInputChange('title', e.target.value, e.type === 'blur');
          }}
        />
      </Form.Item>
      <Form.Item
        label="话术内容"
        name="script"
        rules={[
          {
            required: true,
            whitespace: true,
            max: 500,
            message: '仅支持输入500个以内字符',
          },
        ]}
        getValueFromEvent={event => {
          return event.target.value.replace(/\s+/g, '');
        }}
      >
        <TextArea
          maxLength={500}
          // onChange={e => {
          //   console.log(e, "话术内容-onChange");
          //   onInputChange("script", e.target.value, e.type === "blur");
          // }}
          onBlur={(e: { target: { value: any }; type: string }) => {
            console.log(e, '话术内容-onBlur');
            onInputChange('script', e.target.value, e.type === 'blur');
          }}
        />
      </Form.Item>
      <Form.Item
        required
        label="客户静默达到"
        className="form-list-item-ctn"
        style={{ flexDirection: 'row' }}
      >
        <Form.Item
          name="timeout"
          rules={[{ required: true, message: '请输入1-60以内数字' }]}
          noStyle
        >
          <InputNumber
            min={1}
            max={60}
            precision={0}
            size="middle"
            placeholder="1-60"
            className="timeout-number-input"
            // onChange={value => {
            //   onInputChange("timeout", Number(value), false);
            // }}
            onBlur={(e: { target: { value: any } }) => {
              onInputChange('timeout', Number(e.target.value), true);
            }}
          />
        </Form.Item>
        <span className="form-item-last-txt">秒，自动跳转</span>
      </Form.Item>
    </Form>
  );
};

export default SkipComponent;
